<template>
  <div class="login">
    <div class="card" :class="isLogin?'':'register'">
      <!-- login-card -->
      <div class="login-card">
        <i class="iconfont icon-qiehuan" @click="isLogin = !isLogin"></i>
        <img class="avatar" :src="require('@/assets/img/avatar.jpg')" alt="">
        <div>
          <input type="text" v-model="loginInfo.userName" placeholder="请输入用户名">
        </div>
        <div>
          <input type="password" v-model="loginInfo.password" placeholder="请输入密码">
        </div>
        <div class="btn" @click="login">登录</div>
      </div>
      <!-- register-card -->
      <div class="register-card">
        <i class="iconfont icon-qiehuan" @click="isLogin = !isLogin"></i>
        <div class="reg-user-name">
          <a-upload name="file" list-type="picture-card" class="avatar-uploader upload-avatar" :show-upload-list="false" action="/api/files/upload_file" :before-upload="beforeUpload" @change="handleChange">
            <img v-if="registerInfo.avatar" :src="registerInfo.avatar" alt="avatar" />
            <div v-else>
              <a-icon :type="imgLoading ? 'loading' : 'plus'" />
            </div>
          </a-upload>
          <input type="text" placeholder="取一个名字" v-model="registerInfo.userName">
        </div>
        <div><input type="password" placeholder="输入你的密码" v-model="registerInfo.password"></div>
        <div><input type="password" placeholder="确认你的密码" v-model="registerInfo.confirmPassword"></div>
        <div><input type="text" placeholder="输入你的邮箱" v-model="registerInfo.email"></div>
        <div class="btn" @click="signin">注册</div>
      </div>

    </div>
  </div>
</template>

<script>
import { api_login, api_signin } from '@/api/user'

export default {
  name: "ChatLogin",
  components: {
    // HelloWorld,
  },
  data () {
    return {
      loginInfo: {
        userName: '',
        password: '',
      },
      registerInfo: {
        avatar: '',
        userName: '',
        password: '',
        confirmPassword: '',
        email: '',
      },
      isLogin: true,

      imgLoading: false,
    }
  },
  created () {
    if (this.$store.state.userInfo) {
      this.$router.go(0)
    }
    window.$socket && window.$socket.disconnect()
  },
  methods: {
    // 点击登录的回调
    async login () {
      // 判断是否存在空值
      for (var key in this.loginInfo) {
        if (!this.loginInfo[key].trim()) {
          this.$message.warning(`${key}不能为空哦`)
          return
        }
      }

      let res = await api_login(this.loginInfo)
      console.log(res);
      if (res.data.code === 200) {
        this.$store.commit('setUserInfo', res.data.userInfo)
        this.$router.push('/index')
      } else {
        this.$message.error(res.data.msg)
      }
    },

    // 点击注册的回调
    async signin () {
      // 判断是否存在空值
      for (var key in this.registerInfo) {
        if (!this.registerInfo[key].trim()) {
          this.$message.warning(`${key}不能为空哦`)
          return
        }
      }

      if (this.registerInfo.password !== this.registerInfo.confirmPassword) {
        this.$message.warning('两次密码不一致')
        return
      }

      // 正则校验邮箱
      let emailReg = /^[A-Za-z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (!emailReg.test(this.registerInfo.email)) {
        this.$message.warning('邮箱格式错误')
        return
      }

      let res = await api_signin(this.registerInfo)

      if (res.data.code == 200) {
        this.$message.success('注册成功')
        this.isLogin = true;
        this.loginInfo = {
          userName: this.registerInfo.userName,
          password: '',
        }
      } else {
        this.$message.error(res.data.msg)
      }
    },

    handleChange (info) {
      if (info.file.status === 'uploading') {
        this.loading = true;
        return;
      }
      if (info.file.status === 'done') {
        this.registerInfo.avatar = info.file.response.src
        this.imgLoading = false;
      }
    },

    beforeUpload (file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJpgOrPng) {
        this.$message.error('只能上传 JPG/PNG 格式的文件哦');
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('图片大小不能超过2M');
      }
      return isJpgOrPng && isLt2M;
    },
  },
};
</script>

<style scoped>
.login {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: url("@/assets/img/login_background.jpg") no-repeat;
  background-position: bottom;
  background-size: cover;
  /* backdrop-filter: blur(10px); */
}

.card {
  position: relative;
  height: 360px;
  width: 280px;
  transform: perspective(800px) rotateY(0deg);
  transition: 0.6s all ease;
  transform-style: preserve-3d;
  box-shadow: 0 0px 20px 10px rgba(0, 0, 0, 0.15);
  border-radius: 5px;
}

.card > div {
  height: 100%;
  width: 100%;
  padding: 0 30px;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  border-radius: 5px;
}

.login-card {
  background-color: #f5f5f5;
  backface-visibility: hidden;
  transform: translateZ(1px);
}

.register-card {
  background-color: #f5f5f5;
  transform: translateZ(-1px) rotateY(180deg);
  border-radius: 5px;
}

.register {
  transform: perspective(800px) rotateY(180deg);
}

.icon-qiehuan {
  position: absolute;
  right: 15px;
  top: 8px;
  font-size: 20px;
  transition: 0.3s transform ease;
}

.icon-qiehuan:hover {
  transform: scale(1.1);
}

.avatar {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 5px;
  margin: 20px;
}

input {
  border: 1px solid #ccc;
  padding: 5px 10px;
  margin: 5px 0;
  border-radius: 5px;
  width: 100%;
}

input:focus {
  outline: none;
}

.btn {
  background-color: #1aad19;
  color: white;
  padding: 7px 0;
  margin: 18px 0;
  width: 100%;
  border-radius: 5px;
  cursor: pointer;
}

.btn:hover {
  background-color: #129611;
}

.upload-avatar {
  height: 50px;
  width: 50px;
  min-width: 50px;
  margin-right: 10px;
}

.upload-avatar /deep/ .ant-upload {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  display: flex;
}

.upload-avatar /deep/ .ant-upload:hover {
  border-color: #1aad19;
}

.upload-avatar /deep/ .ant-upload span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.reg-user-name {
  display: flex;
  align-items: center;
  width: 186px;
}

.reg-user-name input {
  flex: 1;
}

.register-card > div {
  margin: 3px;
}

.register-card .btn {
  margin-top: 20px;
  margin-bottom: 0;
}
</style>
